import { AndroidOutlined, AppleOutlined, BorderInnerOutlined, ForkOutlined } from '@ant-design/icons';
import { Col, Row, Tabs, Menu } from 'antd';
import React, { useState } from 'react';
import Patient from './patient';

const textArr = ["门诊", "复诊开方"];

const menuItems = [
  {
    key: 1,
    icon: <ForkOutlined />,
    label: '门诊',
  },
  {
    key: 2,
    icon: <BorderInnerOutlined />,
    label: '复诊',
  },
]

const Index: React.FC = ({ gotoDetail }) => {
  const [index, setIndex] = useState<number>(1);


  const menzhenPending = <div style={{ marginTop: '10px', paddingRight: '15px', overflow: 'auto' }}><Patient gotoDetail={gotoDetail} data={index} status={0} type={2} /></div>;
  const menzhenDone = <div style={{ marginTop: '10px', paddingRight: '15px', overflow: 'auto' }}><Patient gotoDetail={gotoDetail} data={2} status={3} type={2} /></div>;

  const fuzhenPending = <div style={{ marginTop: '10px', paddingRight: '15px', overflow: 'auto' }}><Patient gotoDetail={gotoDetail} data={index} status={0} type={2} /></div>;
  const fuzhenDone = <div style={{ marginTop: '10px', paddingRight: '15px', overflow: 'auto' }}><Patient gotoDetail={gotoDetail} data={4} status={3} type={2} /></div>;


  const handleClick = (e: any) => {
    setIndex(e.key);

  }

  return (
    <div style={{ display: 'flex' }}>
      {/* <div style={{ width: 100, float: 'left', backgroundColor: 'white' }}>
        <Row style={{ backgroundColor: index == 1 ? '#f0f2f5' : 'white' }} onClick={() => handleClick(1)}>
          <Col span={24} style={{ padding: "12px 0", cursor: "pointer" }} onClick={() => { }}>
            <Row style={{ textAlign: 'center', fontSize: 14, fontWeight: 700 }}>
              <Col span={24} style={{ fontSize: 14 }}><ForkOutlined /></Col>
            </Row>
            <Row style={{ textAlign: 'center', fontSize: 14, fontWeight: 700 }}>
              <Col span={24} style={{ fontSize: 14 }}>门诊</Col>
            </Row>
          </Col>
        </Row>
        <Row style={{ backgroundColor: index == 2 ? '#f0f2f5' : 'white' }} >
          <Col span={24} style={{ padding: "12px 0", cursor: "pointer" }} onClick={() => { handleClick(2) }}>
            <Row style={{ textAlign: 'center', fontSize: 14, fontWeight: 700 }}>
              <Col span={24} style={{ fontSize: 14 }}><BorderInnerOutlined /></Col>
            </Row>
            <Row style={{ textAlign: 'center', fontSize: 14, fontWeight: 700 }}>
              <Col span={24} style={{ fontSize: 14 }}>复诊</Col>
            </Row>
          </Col>
        </Row>
      </div> */}

      <div>
        <Menu
          className='menu-container'
          onClick={handleClick}
          style={{
            width: 256,
          }}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          items={menuItems}
        />
      </div>
      <div style={{ overflow: 'auto', marginLeft: 20 }}>
        {
          index == 1 ?
            <>{menzhenPending}</> : null
        }
        {
          index == 2 ?
            <>{fuzhenPending}</> : null
        }
      </div>
    </div>

    // <Tabs
    //   defaultActiveKey="1"
    //   tabPosition="left"
    //   items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
    //     const id = String(i + 1);
    //     const text = textArr[i];

    //     return {
    //       label: (
    //         <Row gutter={[16, 16]}>
    //           <Col span={16}>
    //             <Row><Icon style={{ marginLeft: 10 }} /></Row>
    //             <Row style={{ textAlign: 'center' }}>{text}</Row>
    //           </Col>
    //         </Row>
    //       ),
    //       key: id,
    //       children: <div style={{height:'600px',marginTop:'10px',paddingRight:'15px',overflow:'auto'}}><Patient gotoDetail={gotoDetail} data={i} /></div>,
    //     };
    //   })} />
  );
};

export default Index;